<template>
	<div class="login-bg">
		<div class="login-panel">
			<div style="text-align: center;">
				<h1 style="font-size: 30px; font-family: 幼圆;">蓝芯管理系统用户登录</h1>
			</div>
			<el-form :model="loginData" :rules="rules" ref="formDataRef" :hide-required-asterisk="true"
				label-width="100px">
				<el-form-item label="账 号&nbsp;&nbsp;&nbsp;&nbsp;" prop="username">
					<el-input v-model="loginData.username" placeholder="账号" size="large" type="text"
						style="width: 90%;">
					</el-input>
				</el-form-item>
				<el-form-item label="密 码&nbsp;&nbsp;&nbsp;&nbsp;" prop="password">
					<el-input v-model="loginData.password" placeholder="请输入密码" size="large" type="password"
						@keyup.enter="login(formDataRef)" style="width: 90%;">
					</el-input>
				</el-form-item>
				<el-form-item label="  ">
					<el-button type="primary" style="width: 30%;" @click="login(formDataRef)"
						size="large">登录</el-button>
					<el-button type="default" style="width: 30%;" @click="resetForm(formDataRef)"
						size="large">取消</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

const formDataRef = ref();

let loginData = reactive({
	username: "",
	password: ""
});

const rules = reactive({
	username: [{
		required: true,
		message: "请输入账号"
	}],
	password: [{
		required: true,
		message: "请输入密码"
	}],
});

const login = (formRef) => {
	formRef.validate((valid) => {
		if (valid) {

			let tokenObj = { token: " isLogin", startTime: new Date().getTime() };
			window.localStorage.setItem("isLogin", JSON.stringify(tokenObj));
			localStorage.setItem("username", JSON.parse(JSON.stringify(loginData.username)));

			router.push("/");
		} else {
			ElMessage({
				type: 'error',
				message: '请填写登录信息再进行登录操作!',
				duration: 800
			});
			return false
		}
	})
}

const resetForm = (formRef) => {
	formRef.resetFields();
}
</script>

<style scoped>
.login-bg {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-size: cover;
	background-image: url('../assets/login.png');
}

.login-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;

	padding: 25px;
	width: 30%;
	min-width: 360px;
	height: 20%;
	min-height: 260px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 3%;
	box-shadow: 2px 2px 10px #ddd;
}
</style>